<template>
    <div class="popUp">
        <yh-dialog
            :title="title"
            :visible.sync="dialogVisible"
            @close="handleBtn('cancel')"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            class="editDialog"
            width="800px"
            drag
        >
            <div style="height: fit-content">
                <RiskTrantableInline
                    :currentNode="currentNode"
                    leftPlaceholder="编号/名称"
                    rightPlaceholder="编号/名称"
                    :columns="tranColumns"
                    :leftTableData="leftTranData"
                    :rightTableData="rightTranData"
                    :searchNames="['entryCode', 'entryName']"
                    indexKey="entryCode"
                    ref="tranTable"
                    sort="entryCode"
                    url="/syncLmtCode/filterByCode"
                />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleBtn('cancel')" :loading="loading">取 消</el-button>
                <el-button type="primary" @click="handleBtn('confirm')" :loading="loading">确 定</el-button>
            </span>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator';
import RiskTrantableInline from '@/common/components/risk-trantable-inline.vue';
import { inserSelectEntryCode, selectByEntryCode } from '@/pages/setting/api';

@Component({
    name: 'EditEntryPopup',
    components: { RiskTrantableInline },
})
export default class EditEntryPopup extends Vue {
    @Prop() editEntryPopupVisible;
    @Prop() currentNode;
    loading: boolean = false;
    title: string = '';
    private dialogVisible: boolean = false;
    private leftTranData: any[] = [];
    private rightTranData: any[] = [];
    private tranColumns: any[] = [
        {
            label: '条目编号',
            prop: 'entryCode',
            width: 80,
        },
        {
            label: '风险说明',
            prop: 'entryName',
            width: 165,
        },
    ];
    oldRightTranData: any[] = []; // 右侧旧数据

    @Watch('editEntryPopupVisible')
    watchqueryPopup(val) {
        if (val == true) {
            if (this.currentNode.id == '1') {
                this.title = '编辑白名单条目';
            } else if (this.currentNode.id == '2') {
                this.title = '编辑黑名单条目';
            }

            this.getRightAllData();
        }
    }

    /**
     * 右侧的所有数据
     */
    getRightAllData() {
        selectByEntryCode({
            lmtType: this.currentNode.id,
        })
            .then((res: any) => {
                this.oldRightTranData = res;
                this.rightTranData = JSON.parse(JSON.stringify(res));
                this.dialogVisible = true;
            })
            .catch(err => {
                console.log(err);
            });
    }

    handleBtn(param) {
        if (param == 'cancel') {
            this.dialogVisible = false;
            this.$emit('emitEditEntryPopupVisible', 'cancel');
        } else if (param == 'confirm') {
            const rightData = (this.$refs.tranTable as any).getRightAllData();
            this.loading = true;
            inserSelectEntryCode({ afterCodeDetail: rightData, beforeCodeDetail: this.oldRightTranData, lmtType: this.currentNode.id })
                .then((res: any) => {
                    this.dialogVisible = false;
                })
                .finally(() => {
                    this.loading = false;
                    this.$emit('emitEditEntryPopupVisible', 'confirm');
                });
        }
    }
}
</script>
<style lang="scss" scoped>
table {
    border-spacing: 10px;
    tr {
        td:nth-child(1),
        td:nth-child(3) {
            text-align: right;
            width: 60px !important;
        }
    }
}
/deep/ .el-dialog .el-dialog__body {
    max-height: 100vh;
}
/deep/ .editDialog .el-dialog .el-dialog__body {
    height: 460px;
}
</style>
